<template>
  <div class="max-w-4xl mx-auto px-4 py-8">
    <div
      class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-100 dark:border-gray-700"
    >
      <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
        {{ isEdit ? "编辑文章" : "发布文章" }}
      </h1>

      <form @submit.prevent="handleSubmit" class="space-y-6">
        <!-- 标题输入 -->
        <div>
          <label
            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
          >
            文章标题
          </label>
          <input
            v-model="form.title"
            type="text"
            class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            required
          />
        </div>

        <!-- 描述输入 -->
        <div>
          <label
            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
          >
            文章描述
          </label>
          <textarea
            v-model="form.description"
            rows="3"
            class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            required
          ></textarea>
        </div>

        <!-- 富文本编辑器 -->
        <div>
          <label
            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
          >
            文章内容
          </label>
          <div class="border border-gray-300 dark:border-gray-600 rounded-md">
            <TiptapEditor v-model="form.content" />
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="flex justify-end space-x-4">
          <NuxtLink
            to="/blog"
            class="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md"
          >
            取消
          </NuxtLink>
          <button
            type="submit"
            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
            :disabled="isSubmitting"
          >
            {{ isSubmitting ? "保存中..." : "保存文章" }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
const route = useRoute();
const router = useRouter();
const isEdit = computed(() => route.params.slug !== "new");

// 表单数据
const form = ref({
  title: "",
  description: "",
  content: "",
  date: new Date().toISOString(),
});

// 提交状态
const isSubmitting = ref(false);

// 如果是编辑模式，获取文章数据
if (isEdit.value) {
  const { data: post } = await useAsyncData(`blog-${route.params.slug}`, () => {
    return queryCollection("blog").path(`/blog/${route.params.slug}`).first();
  });

  if (post.value) {
    form.value = { ...post.value };
  }
}

// 处理表单提交
const handleSubmit = async () => {
  try {
    isSubmitting.value = true;

    // TODO: 实现文章保存逻辑
    // 这里需要根据你的后端API来实现保存逻辑

    // 保存成功后跳转到文章页面
    router.push("/blog");
  } catch (error) {
    console.error("保存文章失败:", error);
    // TODO: 显示错误提示
  } finally {
    isSubmitting.value = false;
  }
};
</script>
